<template>
	<view class="body-view">
		<!--导航和状态栏-->
		<view class="state-navigation">
			<view class="slim_header_navigation d-flex a-center j-center" >
				<view class="left_box" @tap="goBack">
					<image src="/static/center/back.png" class="back"></image>
				</view>
				<view class="title">账号与安全</view>
				<view class="right_box">
					<!-- <image src="/static/center/dian.png" class="dian"></image> -->
				</view>
			</view>
		</view>
		<!-- 顶部位置占位 -->
		<view style="height:calc(100rpx + var(--status-bar-height));"></view>
        <view class="content">
            <view class="box">


            <view class="set-row d-flex a-center">
                <image class="row-icon" src="/static/image/set-phone.png"></image>
                <view class="row-content">
                    <view class="content-title">登录手机号</view>
                    <view class="phone-phone">{{showPheone}}</view>
                </view>
                <view class="row-left">
                    <view class="left-button d-flex a-center"  @tap="goChangePhone">
                        <view class="button-phone">更换绑定</view>
                        <view><i class="icon icon-phone icon-more-2"></i></view>
                        
                    </view>
                </view>
            </view>
            <view class="set-row d-flex a-center">
                <image class="row-icon" src="/static/image/set-password.png"></image>
                <view class="row-content">
                    <view class="content-title">修改登录密码</view>
                </view>
                <view class="row-left">
                    <view class="left-button d-flex a-center"  @tap="goChangePassword">
                        <view class="button-password">去修改</view>
                        <view><i class="icon icon-password icon-more-2"></i></view>
                    </view>
                </view>
            </view>
            <view class="set-row d-flex a-center">
                <image class="row-icon" src="/static/image/set-WeChat.png"></image>
                <view class="row-content">
                    <view class="content-title">{{userInfo.openid?'已绑定微信':'未绑定'}}</view>
                </view>
                <view class="row-left">
                    <view v-if="userInfo.openid" class="left-button d-flex a-center">
                        <cacheimg
                            class="user-head"
                            :saveKey="userInfo.id"
                            :src="userInfo.wechatImage||'/static/head.jpg'"
                            mode="aspectFill"
                        ></cacheimg>
                        <view class="user-name">{{userInfo.wechatName}}</view>
                    </view>
                    <view v-else class="left-button d-flex a-center" @tap="bindWeChat">
                        <view class="button-password">去绑定</view>
                        <view><i class="icon icon-password icon-more-2"></i></view>
                    </view>
                </view>
            </view>
            </view>
        </view>


        <view class="bottom_box">
            <view class="logoff_btn d-flex a-center j-center" @tap="popup.open()">注销账户</view>
            <view class="heightBox"></view>
        </view>

	</view>

    <uni-popup
            ref="popup"
            type="bottom"
            background-color="transparent"
            :safe-area="false"
        >   


            <view class="sys-confirm-content">
				<view class="confirm-content-title">确认注销账户吗？</view>
				<view class="confirm-content-tip">
					<view class="content-tip-row" style="color: #cc3300;">您所有在瘦身群的数据和账户信息都将被清除</view>
				</view>
				<view  @tap="Logoff" class="content-button button-confirm" style="color: #1DC691;">确认</view>
				<view style="height: 20rpx; background: #f5f5f5"></view>
				<view @tap="popup.close()" class="content-button" style="color: #999999;">取消</view>
		    </view>
        </uni-popup>


</template>

<script setup lang="tsx" name="accountSetting">
import { ref } from "vue";
import { onShow } from "@dcloudio/uni-app";
import { userData as userDataStore } from "@/store/userData";
import { getUserDetail,bindWechat,loginOut,logoff } from "@/api/api";
import { desensitizePhone } from "@/utils/format";
import cacheimg from '@/components/cacheimg.vue'

import { loginOut as imLoginOut } from '@/hooks/imLogin'
import { config as configStore }  from '@/store/config'



const  goBack = () => {
	uni.navigateBack();
};
let userInfo: any = ref({});
const userData: any = userDataStore();
const showPheone = ref();
const config = configStore();
onShow(() => {
	refreshData();//刷新当页数据
});
//刷新当页数据
const refreshData = () => {
	getUserDetail({id:userData.id}).then((res: any) => {
		userInfo.value = res.data;
		console.log(userInfo.value)
		//userInfo.value.nickName = "哈哈哈哈哈"
		showPheone.value = desensitizePhone(userInfo.value.phone)
		//console.log(userInfo.value);
	});
}
const goChangePhone = () => {
	uni.navigateTo({
		url:"/pages/changePhone/changePhone"
	});
}
const goChangePassword = () => {
	uni.navigateTo({
		url:"/pages/changePassword/changePassword"
	});
}
const bindWeChat = () =>{
	uni.login({ 
		"provider": "weixin",
		"onlyAuthorize": true, 
		success: function(event){
			const {code} = event;
			let params = {
				code:code,
				id:userData.id
			}
			//客户端成功获取授权临时票据（code）,向业务服务器发起登录请求。
			bindWechat(params).then((res: any) => {
				refreshData();//刷新当页数据
				if(res.success){
					uni.showToast({
					    title: res.message,  
					    icon: 'none',  
					    duration: 2000,
					});
				}else{
					uni.showToast({
					    title: res.message,  
					    icon: 'none',  
					    duration: 2000  
					});
				}
			});
		},
		fail: function (err) {
			console.log(err)
			// 登录授权失败
			// err.code是错误码
			uni.showToast({
			    title: '绑定失败',  
			    icon: 'error', 
			    duration: 2000  
			});
	        
	    }
	})
}

const userLoginOut = async () => {
    await imLoginOut();
    const res: any = await loginOut();
    const { flag } = res;
    if (flag === 9000 || flag === 1) {
        userData.clearUserData();
        config.setPageUnload();
        uni.removeStorageSync('api_token');
        uni.reLaunch({
            url: "/pages/login/login",
            animationType: "fade-in",
        });
        return true;
    }
};

const Logoff =async()=>{

    popup.close()

    const res = await logoff({id:userData.id})

    const {flag} = res;
    if(flag!==1){
        uni.showToast({
            icon: "none",
            title: '注销账号失败，请稍后再试',
            duration: 2000,
        });
        return
    }

    uni.showToast({
        icon: "none",
        title: '账号已注销',
        duration: 2000,
    });

    setTimeout(()=>{
        userLoginOut();
    },2000)

}

const popup = ref(null);



</script>
<style lang="scss" scoped>
@import './accountSetting.scss';
.bottom_box{
    width:750rpx;
    position:fixed;
    bottom:0;
    left:0;

    .heightBox {
        width:750rpx;
        height:50rpx;
        height: env(safe-area-inset-bottom);
        height: constant(safe-area-inset-bottom);
        min-height: 20rpx;
    }
}



.logoff_btn{
    width:710rpx;
    height:80rpx;
    background:#dd524d;
    font-size:30rpx;
    color:#fff;
    font-weight:600;
    margin:0 auto;
    border-radius: 20rpx;
    &:active{
        opacity: .7;
    }
}
</style>

